<template>
  <div class="top-banner-bg"
       :style="{backgroundImage:`url(${state.topBannerBgImg.icon})`}"></div>
  <div class="banner-wrapper">
    <div class="main-wrapper">
      <div class="menu-wrapper">
        <div class="menu-item" v-for="item in state.subjectList" :key="item.id">
          <span class="menu-item-title">{{ item.name }}</span>
          <!--          <span class="menu-item-sub-title"></span>-->
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <el-carousel @change="bannerChange" v-show="state.subjectList.length>0">
        <el-carousel-item v-for="item in state.subjectList" :key="item.id">
          <a href="#">
            <img :src="item.icon" alt=""/>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="show-wrapper">
      <a href="" class="show-item" v-for="item in state.showIconList" :key="item.id">
        <div class="show-item-icon" :style="{backgroundImage: `url(${item.icon})`}"/>
        <div class="show-item-desc">
          <h4>{{ item.description }}</h4>
          <p>{{ item.detail }}</p>
        </div>
      </a>
      <div class="show-line"/>
      <a href="" target="_blank" class="to-byte-link">
        <div class="link-title">
          去字节源
        </div>
        <div class="more-btn">
          more<span class="el-icon-arrow-right"></span>
        </div>
      </a>
    </div>
  </div>
</template>

<script setup>
import subjectApi from '../../../api/subject'
import { onMounted, reactive } from 'vue'

const state = reactive({
  subjectList: [],
  topBannerBgImg: {},
  showIconList: [
    {
      id: 1,
      icon: 'https://linq-cool.oss-cn-shanghai.aliyuncs.com/20210505/f83d33764ec34af38d5ed6b447f74263.jpeg',
      description: 'Java工程师',
      detail: '综合就业率排名第一'
    },
    {
      id: 2,
      icon: 'https://linq-cool.oss-cn-shanghai.aliyuncs.com/20210505/5d74f9423a4a4523b10e6f75420097f0.jpeg',
      description: '前端工程师',
      detail: '入门槛，就业快，岗位多'
    },
    {
      id: 3,
      icon: 'https://linq-cool.oss-cn-shanghai.aliyuncs.com/20210505/f506982a949843bc9e5223be55374e10.jpeg',
      description: 'Python工程师',
      detail: '应用领域最广泛'
    },
    {
      id: 4,
      icon: 'https://linq-cool.oss-cn-shanghai.aliyuncs.com/20210505/a2ee69b25ea94aaab951c43344af140e.jpeg',
      description: 'Web前端架构师',
      detail: '培养P7级架构师'
    },
    {
      id: 5,
      icon: 'https://linq-cool.oss-cn-shanghai.aliyuncs.com/20210505/b77518c5d64e42f79afb40aca810a893.jpeg',
      description: 'Java架构师P7',
      detail: '千万级电商架构师'
    }
  ]
})

const getSubjectList = () => {
  subjectApi.getAll().then(res => {
    state.subjectList = res.data
  })
}

const bannerChange = (index) => {
  state.topBannerBgImg = state.subjectList[index]
}

onMounted(() => {
  getSubjectList()
})


</script>

<style lang="scss" scoped>
@media(max-width: 1152px) {
  .banner-wrapper, .top-banner-bg {
    display: none;
  }
}

.top-banner-bg {
  height: 180px;
  opacity: 0.3;
  filter: blur(100px);
  width: 100%;
  position: absolute;
  top: 0;
  background-size: cover;
  transition: all .3s;
}

.banner-wrapper {
  margin-top: 40px;
  padding-bottom: 40px;
  box-shadow: 0 2px 8px 0 rgb(7 17 27 / 6%);
  background-color: #fff !important;

  .main-wrapper {
    height: 562px;
    background-color: #93999f;
    position: relative;
    overflow: hidden;
    width: 1152px;
    margin: auto;
    border-radius: 8px 8px 0 0;


    .el-carousel {
      height: 562px;

      :deep(.el-carousel__container) {
        height: 100%;

        .el-carousel__item {
          height: 100%;

          a {
            img {
              height: 100%;
              width: 100%;
            }
          }
        }
      }
    }


    .menu-wrapper {
      height: 562px;
      position: relative;
      float: left;
      width: 140px;
      z-index: 2;
      padding-top: 17px;
      box-sizing: border-box;
      background: #39364d;
      border-bottom-left-radius: 4px;
      font-weight: 400;

      .menu-item {
        line-height: 30px;
        cursor: pointer;
        position: relative;
        color: #fff;
        padding: 0 14px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        height: 30px;
        transition: all .1s;
        font-size: 14px;

        .menu-item-title {
          line-height: 30px;
          cursor: pointer;
          color: #fff;
          font-size: 14px;
        }

        .menu-item-sub-title {
          font-size: 12px;
        }
      }

      .menu-item:hover {
        font-size: 16px;
        color: #fff;
        background-color: rgb(255, 255, 255, 0.1);
      }
    }
  }


  .show-wrapper {
    width: 1152px;
    height: 100px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0 5px 20px 0;
    border-radius: 0 0 8px 8px;

    .show-item {
      display: block;
      width: 192px;
      height: 45px;
      line-height: 45px;
      float: left;
      margin: 28px 0 0 16px;
      cursor: pointer;

      .show-item-icon {
        float: left;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-size: cover;
        margin-right: 8px;
        transition: all .2s;
      }

      .show-item-desc {
        margin-top: -16px;

        h4 {
          display: block;
          width: 139px;
          font-size: 14px;
          color: #1C1F21;
          letter-spacing: 0.76px;
          line-height: 16px;
          margin-bottom: 1px;
          white-space: nowrap;
          overflow: hidden;
        }

        p {
          width: 139px;
          font-size: 8px;
          color: #545C63;
          line-height: 14px;
          white-space: nowrap;
          overflow: hidden;
        }

      }

    }

    .show-line {
      float: left;
      height: 36px;
      border: 1px solid #e8e8e8;
      margin: 33px 0 0 16px;
    }

    .to-byte-link {
      position: relative;
      display: block;
      height: 100%;
      cursor: pointer;
      overflow: hidden;

      .link-title {
        color: #1c1f21;
        text-align: center;
        line-height: 14px;
        font-size: 12px;
        margin-top: 40px;
      }

      .more-btn {
        font-size: 12px;
        color: #545c63;
        line-height: 12px;
        margin-left: 30px;
        position: relative;
      }
    }

    a:link, a:visited {
      color: #1c1f21;
    }

    :link, :visited, ins {
      text-decoration: none;
    }
  }
}

</style>
